<script setup>
import { computed, ref } from 'vue';

// 原始数据
const totalCount = ref(100)

// 计算属性，可以直接用箭头函数简写，省掉 {} 和 return
const disCount = computed(() => totalCount.value * 0.8)

// 原始数据
const arr = ref([1, 2, 3, 4, 5])
// 计算数据
const doubleArr = computed(() => {
  return arr.value.map(item => item * 2)
})
</script>

<template>
  <!-- 结构 -->
  <h1>原价：{{ totalCount }}</h1>
  <h2>折后价：{{ disCount }}</h2>
  <button @click="totalCount += 100">修改原价</button>
  <p>{{ arr }}</p>
  <p>{{ doubleArr }}</p>
  <button @click="arr.push(100)">修改数组</button>
</template>

<style scoped>
/* 样式 */
</style>
